<template>
	<div class="business-fail-rate-top-container">
		<!-- 数据列表 -->
		<yd-table
			:formData="extendData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="handlerSearch"
			@currentChangeHandler="handlerSearch"
			@sortChangeHandler="handlerSearch"
		></yd-table>
		<el-dialog
			:key="dialog.key"
			v-model="dialog.open"
			width="1500px"
			:close-on-click-modal="false"
			append-to-body
			custom-class="ywgzt-dialog"
			@closed="handleClose"
		>
			<el-row>
				<el-col class="dialogTitle" style="font-size: 20px; color: #fff; font-weight: 900; margin-top: -33px">
					步骤告警明细
					<el-button type="text" :loading="exportLoading" @click="handleClassifyExport">
						<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
					</el-button>
				</el-col>
			</el-row>
			<Dialogs v-if="openshow" ref="setplistRef" :params="queryData"></Dialogs>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { stepAnalysis, stepToBaseAlarmListDownLoad } from '@/api/ops-workbench/business-alarm-analysis/index';
import { randomUUID, downloadFromBlob } from '@/utils/common';
import { ref, reactive, onMounted, onActivated } from 'vue';
import Dialogs from './dialogs.vue';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();
const props = defineProps({
	params: {
		type: Object,
		default: () => {},
	},
});
const emit = defineEmits(['setpClick']);

const openshow = ref(false);
const dialog = reactive({
	key: randomUUID(),
	open: false,
});
const exportLoading = ref(false);
// 表单额外参数
const extendData = reactive({});

const queryData = reactive<anyObj>({});
// 关联查询参数
const searchData = ref({});
// 列表配置
const tableConfig = reactive({
	columns: [
		{
			label: '步骤名称',
			prop: 'stepName',
		},
		{
			label: '步骤类型',
			prop: 'stepType',
			formatter: (row: anyObj, val: ApiVal) => {
				if (val === '1') {
					val = '首';
				} else if (val === '2') {
					val = '中间';
				} else if (val === '3') {
					val = '末';
				}
				return val;
			},
		},
		{
			label: '请求总量',
			prop: 'sumReqCount',
		},
		{
			label: '响应慢请求量',
			prop: 'sumDealTimeAlarmCount',
			operation: [
				{
					text: undefined,
					rowKey: 'sumDealTimeAlarmCount',
					handler: (scope: anyObj) => jump4BaseDetailList(scope.row, 1, '响应慢请求量'),
				},
			],
		},
		{
			label: '失败请求量',
			prop: 'sumFailCount',
			operation: [
				{
					text: undefined,
					rowKey: 'sumFailCount',
					color: '#fe5578',
					handler: (scope: anyObj) => jump4BaseDetailList(scope.row, 2, '失败请求量'),
				},
			],
		},
		{
			label: '告警请求量',
			prop: 'sumAlarmCount',
			operation: [
				{
					text: undefined,
					rowKey: 'sumAlarmCount',
					handler: (scope: anyObj) => jump4BaseDetailList(scope.row, 3, '告警请求量'),
				},
			],
		},
		{
			label: '响应慢比例',
			prop: 'dealTimeAlarmCountRate',
			formatter: (row: anyObj, val: ApiVal) => {
				return val !== null ? val + '%' : val;
			},
		},
	],
	pagination: {
		pageSize: 4,
		pageNum: 1,
		total: 0,
	},
	pageSizes: [4, 10, 20, 30, 50, 100],
	loading: true,
	disableOrderNumber: true,
});
// 列表数据
const tableData = ref<any[]>([]);
const setplistRef = ref<any>();

function reloadList(e: anyObj) {
	searchData.value = e;
	handlerSearch();
}
// 搜索
function handlerSearch() {
	const formData = {
		...extendData,
		...queryData,
	};
	tableConfig.loading = true;
	stepAnalysis(formData).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code === 0) {
			tableData.value = res.data.data;
			tableConfig.pagination.total = res.data.total;
			dataCL();
		} else {
			proxy.$modal.msgError(res.msg);
		}
	});
}
function dataCL() {
	let list = [];
	for (let i of tableData.value) {
		list.push(i.stepCode);
	}
	emit('setpClick', list);
}
//跳转到基础告警
function jump4BaseDetailList(item: anyObj, obj: number, value: string) {
	queryData.alarmRequestType = obj;
	queryData.alarmIndicatorName = value;
	queryData.stepCode = item.stepCode;
	openshow.value = true;
	dialog.open = true;
	proxy.$nextTick(() => {
		setplistRef.value.reloadList(queryData);
	});
}

// 关闭告警统计列表
function handleClose() {
	dialog.key = randomUUID();
	openshow.value = false;
	dialog.open = false;
}

//下载
function handleClassifyExport() {
	const d = {
		...queryData,
	};
	exportLoading.value = true;
	stepToBaseAlarmListDownLoad(d).then((res) => {
		downloadFromBlob(res, '', '响应慢告警分析 - 步骤告警明细 ' + queryData.endTime.replace(/\D/g, '') + '.xlsx').then((o) => {
			exportLoading.value = false;
			if (!o.flag) {
				proxy.$modal.msgWarning(o.msg);
			}
		});
	});
}

function initQuery() {
	for (let key in proxy.$route.query) {
		queryData[key] = proxy.$route.query[key];
	}
}

onMounted(() => {
	initQuery();
	handlerSearch();
	console.log('active-2');
});
onActivated(() => {
	initQuery();
	handlerSearch();
	console.log('active-1');
});

defineExpose({
	reloadList,
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dialogTitle {
	font-size: 20px;
	color: #fff;
	font-weight: 900;
	margin-top: -33px;
	width: 80%;
}
.icon-cls {
	width: 20px;
	height: 20px;
	color: #00ffff;
}
</style>
